<template>
  <ContainerBox type="common" class="note-detail">
    <div class="note-content">
      <div id="editor">
        <p>欢迎使用 <b>wangEditor</b> 富文本编辑器</p>
      </div>
    </div>
    <div class="options">
      <div v-if="status" @click="save">保存</div>
      <div @click="$router.push('/skillPage/'+$route.params.id+'/note/list')">返回</div>
    </div>
  </ContainerBox>
</template>

<script>
import ContainerBox from '../../../box/container_box'
export default {
name: "skill_page_note_save",
  data() {
    return {
      content: "",
      status: true
    }
  },
  components :{ContainerBox},
  mounted() {
    this.getNoteDetail();
    this.$editor.getEditor();
    this.autoSave();
  },
  methods: {
    getNoteDetail: function () {
      const self = this;
      this.$axios({
        method: 'get',
        url: '/skill/note/get/' + self.$route.params.noteId
      }).then(function (response) {
        var jsonString = JSON.stringify(response.data);
        var jsonObj = JSON.parse(jsonString);
        console.log(jsonObj);
        if (jsonObj.success) {
          self.content = jsonObj.data.note.content;
          if (self.content === '' || self.content === undefined) {
            self.$editor.setHtml("<p>开始你的笔记吧</p>");
          } else {
            self.$editor.setHtml(self.content);
          }
        } else {
          self.$editor.setHtml("<p>内容获取失败，编辑无效</p>");
          this.status = false;
          self.$editor.readOnly();
        }
      })
    },
    save() {
      const self = this;
      this.content = self.$editor.getHtml();
      this.$axios({
        method: 'put',
        url: '/skill/note/update',
        data: {
          id : self.$route.params.noteId,
          content : self.$editor.getHtml()
        }
      }).then(function (response) {
        var jsonString = JSON.stringify(response.data);
        var jsonObj = JSON.parse(jsonString);
        if (jsonObj.success) {
          self.$message({
            type: 'success',
            message: '笔记保存成功!'
          });
        } else {
          self.$message({
            type: 'failed',
            message: '笔记保存失败!'
          });
        }
      })
    },
    autoSave() {

    }
  }
}
</script>

<style lang="scss" scoped>
@import "../../../.././assets/style/common";
.note-detail{
  .options {
    margin: 0 auto;
    display: flex;
    width: 300px;
    height: 80px;
    justify-content: space-between;
    align-items: center;
    div:first-child {
      @include btn_add();
    }
    div:last-child {
      @include btn_delete();
    }
  }
}
</style>
